<template>
  <!-- 首页容器 -->
  <el-container>
    <!-- 头部容器 -->
    <el-header class="header">
      <div class="left">
        <img src="../assets/img/logo.png" alt="" />
        <span>投票系统</span>
      </div>
      <div class="right">
        <el-dropdown>
          <span class="el-dropdown-link">
            {{ userinfo.username
            }}<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>
              <span @click="dialogIsShow"> 修改密码</span>
            </el-dropdown-item>
            <el-dropdown-item>
              <span @click="logOut"> 退出登录</span>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <span class="signin">已登录</span>
      </div>
    </el-header>
    <el-container class="main_my">
      <el-aside width="300px">
        <!-- 发布问卷按钮 -->
        <el-button class="createdButton" @click="isShowQuestionnaire = true"
          >+ 创建问卷</el-button
        >

        <!-- 侧边导航栏 -->
        <el-menu
          router
          :default-active="activePath"
          class="el-menu-vertical-demo"
        >
          <el-menu-item
            v-for="(item, index) in navList"
            :key="index"
            :index="'/' + item.path"
            @click="navClick('/' + item.path)"
            :class="activePath == '/' + item.path ? 'activeColor' : ''"
          >
            <i :class="item.icon"></i>
            <span slot="title">{{ item.content }}</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <!-- 内容主体 -->
      <el-main>
        <el-scrollbar ref="scrollMenuRef" class="scrollMenuBox">
          <router-view></router-view>
        </el-scrollbar>
      </el-main>
    </el-container>
    <!-- 创建问卷页面 -->
    <CreateQuestionnaire
      @isShowCreateQuestionnaire="isShowCreateQuestionnaire"
      :isShow="isShowQuestionnaire"
    />

    <!-- 修改用户信息提示框 -->
    <el-dialog
      title="修改密码"
      :visible.sync="dialogVisible"
      :before-close="close"
      width="30%"
    >
      <el-form
        ref="loginFormRef"
        :rules="loginFormRules"
        :model="loginForm"
        class="login-form"
      >
        <!-- 用户名 -->
        <el-form-item prop="username">
          <el-input
            :disabled="true"
            @keyup.enter.native="login"
            v-model="loginForm.username"
            prefix-icon="el-icon-user-solid"
            placeholder="请输入修改用户名"
          ></el-input>
        </el-form-item>
        <!-- 密码 -->
        <el-form-item prop="password">
          <el-input
            @keyup.enter.native="updata"
            v-model="loginForm.password"
            prefix-icon="el-icon-s-cooperation"
            show-password
            placeholder="请输入修改的密码"
          ></el-input>
        </el-form-item>
        <!-- 按钮 -->
        <el-form-item class="btns">
          <el-button type="primary" @click="updata">修改</el-button>
          <el-button type="info" @click="resetLoginForm">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </el-container>
</template>

<script>
//引入创建问卷组件

import CreateQuestionnaire from "../components/Questionnaire/CreateQuestionnaire.vue";
// 引入请求模块
import { $http } from "../request/service";

export default {
  name: "Home",
  data() {
    return {
      // 默认选中的导航
      activePath: "/questionnaireList",
      // 侧边栏导航列表
      navList: [
        {
          path: "questionnaireList",
          icon: "el-icon-tickets",
          content: "问卷列表"
        },
        {
          path: "modifyWeight",
          icon: "el-icon-setting",
          content: "修改权重"
        },
        {
          path: "evaUser",
          icon: "el-icon-user",
          content: "评测对象"
        },
        {
          path: "data",
          icon: "el-icon-monitor",
          content: "数据统计"
        }
      ],
      //是否显示创建问卷
      isShowQuestionnaire: false,
      // 用户信息
      userinfo: {},
      // 控制修改用户信息对话框的显示
      dialogVisible: false,
      loginForm: {
        username: "",
        password: ""
      },
      // 表单验证
      loginFormRules: {
        username: [
          {
            required: true,
            message: "请输入用户名称",
            trigger: "blur"
          },
          {
            min: 3,
            max: 10,
            message: "长度在3到10字符之间",
            trigger: "blur"
          }
        ],
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur"
          },
          {
            min: 5,
            max: 15,
            message: "长度在5到15字符之间",
            trigger: "blur"
          }
        ]
      }
    };
  },

  components: { CreateQuestionnaire },
  computed: {},
  created() {
    $http.get("/user").then(res => {
      this.userinfo = res.data[0];
      this.loginForm.username = res.data[0].username;
      this.loginForm.id = res.data[0].id;
    });
  },
  mounted() {
    this.$refs.scrollMenuRef.wrap.addEventListener("scroll", this.scrollMenu);
  },
  methods: {
    // el-scrollbar内滚动条滚动时，打印滚动条向下滚动的距离
    scrollMenu() {
      this.$eventBus.$emit(
        "scrollTop",
        this.$refs.scrollMenuRef.wrap.scrollTop
      );
    },
    // 退出登录
    logOut() {
      // $http.get("/auth/logout").then(res => {
      //   console.log(res);
      // });
      window.sessionStorage.removeItem("token");
      this.$router.push("/login");
    },
    // 关闭用户修改信息对话框重置表单
    close() {
      this.dialogVisible = false;
      this.resetLoginForm();
    },
    // 重置表单
    resetLoginForm() {
      this.$refs.loginFormRef.resetFields();
    },

    updata() {
      this.$refs.loginFormRef.validate(async valid => {
        if (!valid) return;
        // 请求接口
        $http.put(`/user/${this.userinfo.id}`, this.loginForm).then(res => {
          if (res.code !== 200) return this.$message.error(res.message);
          this.$message.success(res.message);
          this.close();
        });
      });
    },
    // 修改用户信息对话框的显示
    dialogIsShow() {
      this.dialogVisible = true;
    },
    // 路由跳转
    navClick(path) {
      this.activePath = path;
    },
    //关闭创建问卷
    isShowCreateQuestionnaire() {
      this.isShowQuestionnaire = false;
    }
  }
};
</script>
<style scoped>
.el-container {
  height: 100vh;
}
.el-header {
  background-color: #fff;
  box-shadow: 0px 10px 15px 5px #f0efef;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 40px;
}
.el-header .left {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}
.el-header .left img {
  width: 40px;
  height: 40px;
}
.el-header .left span {
  padding-left: 10px;
  font-weight: 700;
}

/* .el-aside {
  background-color: aquamarine;
} */

/* 导航侧边栏 */
.el-menu {
  margin: 20px 40px;
  background-color: #f7f7f7;
  border-right: 0 !important;
}
.el-submenu .el-menu-item {
  background-color: #f7f7f7 !important;
}

.el-menu-item {
  /* padding: 0 !important; */
  border-bottom: 1px solid #f1f1f1 !important;
  padding: 0 100px 0 0 !important;
}
.el-menu .el-menu-item:last-child {
  border-bottom: 0 !important;
}
.el-menu-item:hover {
  background-color: #f0f0f0;
}
/* 发布按钮 */
.createdButton {
  background-color: #0095ff;
  color: #fff;
  font-weight: 700;
  width: 220px;
  height: 53px;
  margin-top: 30px;
}

/* 默认选中样式 */
.activeColor {
  background-color: #ededed !important;
  font-weight: 700;
  color: #000000;
}

.el-main {
  padding-left: 100px;
  /* height: 90%; */
}

.scrollMenuBox {
  height: 90%;
}

/deep/ .el-scrollbar__wrap {
  overflow-x: hidden;
}
/* 登录文字样式 */

.signin {
  font-weight: 700;
  color: #0095ff;
}
.el-dropdown {
  padding-right: 10px;
}

/* .main_my {
  padding-left: 100px;
} */
</style>
